<template>
  <view :class="[theme, 'p-30']">
    <view class="fixed left-[var(--window-left)] right-[var(--window-right)] top-0">
      <uv-image width="100%" height="360" src="/static/img/header-mine.png" />
    </view>

    <view class="z-1 mt-180">
      <view class="flex-row " style="margin: 0 20rpx;">
        <uv-avatar size="180" :src="userInfo.avatar || '/static/logo.png'" />
        <view class="ml-30 justify-center">
          <view class="flex-row items-center">
            <text class="text-38 fw-bold mr-24 max-w-270 ellipsis">{{ userInfo.nickname || "-" }}</text>
            <uv-image v-if="+userInfo.partner_level > 0" width="110" height="40" :src="userInfo.partner_lcon" />
          </view>
          <text class="mt-30 color-16">ID：{{ userInfo.user_sn || 0 }}</text>
          <text class="mt-24 color-16">E-mail：{{ userInfo.mobile || "-" }}</text>
        </view>
      </view>

      <view class="m-50 flex-row justify-around">
        <view @click="uniNavigator({ url: '/pages/client/mine/wallet' })" class="items-center">
          <text class="text-40 fw-bold">{{ personalInfo.balance || 0 }}</text>
          <text class="mt-30 text-28 color-16">USDT</text>
        </view>
        <view @click="uniNavigator({ url: '/pages/client/mine/integral' })" class="items-center">
          <text class="text-40 fw-bold">{{ personalInfo.score || 0 }}</text>
          <text class="mt-30 text-28 color-16">積分</text>
        </view>
        <view @click="uniNavigator({ url: '/pages/client/nft/deposits' })" class="items-center">
          <text class="text-40 fw-bold">{{ personalInfo.nft_num || 0 }}</text>
          <text class="mt-30 text-28 color-16">作品</text>
        </view>
      </view>

      <view class="relative">
        <uv-image @click="uniNavigator({ url: '/pages/client/mine/collector' })" width="100%" height="216"
          src="/static/img/img-collector.png" />
        <view class="absolute right-50 top-50% mt-[-56rpx]">
          <uv-image width="112" height="112" src="/static/img/img-go.png" />
        </view>
      </view>
    </view>

    <view class="mt-30">
      <view v-for="option in options" :key="option.key" @click="uniNavigator({ url: option.url })"
        class="flex-row items-center bg-4 mb-30 b-rounded-30" style="padding: 30rpx 50rpx;">
        <uv-icon size="44" :name="option.icon" />
        <text class="flex-1 ml-24 mr-24 text-32 fw-500">{{ option.text }}</text>
        <uv-icon size="20" color="#a7a7a7" name="arrow-right" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { uniNavigator } from "@/common/libs/utils";
import { onShow } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const { $config = {} } = getApp().globalData || {};
const userInfo = reactive<AnyObject>({});
const personalInfo = reactive<AnyObject>({});

const options = [
  {
    key: "profile",
    url: "/pages/client/main/profile",
    text: "個人隱私",
    icon: "/static/img/mine/profile.svg"
  },
  {
    key: "order",
    url: "/pages/client/mine/orders",
    text: "我的訂單",
    icon: "/static/img/mine/order.svg"
  },
  {
    key: "team",
    url: "/pages/client/main/team",
    text: "我的數據",
    icon: "/static/img/mine/team.png"
  },
  {
    key: "promotion",
    url: "/pages/client/main/share",
    text: "推廣",
    icon: "/static/img/mine/promotion.png"
  },
  {
    key: "address",
    url: "/pages/client/main/address",
    text: "收貨地址",
    icon: "/static/img/mine/address.svg"
  },
  {
    key: "setting",
    url: "/pages/client/main/setting",
    text: "設置",
    icon: "/static/img/mine/setting.svg"
  },
];

onShow(() => {
  getUserInfo();
  uni.request({
    url: "/personalData",
    success({ data }: AnyObject) {
      Object.assign(personalInfo, data);
    }
  })
});

const getUserInfo = () => {
  uni.request({
    url: $config.API_USER_INFO_GET,
    success({ data }: any) {
      Object.assign(userInfo, data, data.userData);
      uni.hideToast();
    },
  });
}
</script>

<style lang="scss" scoped>
// scss
</style>